<html>
<head>
<title>YARS Example Page</title>


</head>
<body onload="showHome();showZones()">

<a href='javascript:showHome();'>Media Library</a>&nbsp;&nbsp;
<a href='javascript:showNowPlaying();'>Now Playing</a>&nbsp;&nbsp;

<span id="zoneLinks" ><strong>Zones:<span id="zones">&nbsp;</span></strong></span>&nbsp;&nbsp;
<strong>Selected Zone: </strong><span id="selectedZoneId"></span>&nbsp;<span id="selectedZoneName"></span>
<br/>
<span style="font-size:x-small;">JSON CALL: <span id="jsoncall">&nbsp;</span></span>
<table><tr>
	<td valign="top" nowrap="nowrap"><div id="library">&nbsp;</div></td>
	<td valign="top">
		<table>
			<tr><td valign="top"><div id="controlInfo" style="display:none;">&nbsp;</div></td></tr>
			<tr><td valign="top"><div id="trackInfo">&nbsp;</div></td></tr>
		</table>

	</td>
</tr></table>

</body>

<div id="controlInfoBody" style="display:none;">
	<table border="2">
			<tr><td valign="top">
				<strong>Selected Item: </strong><span id="selectedItem">&nbsp;</span><br/>
				<strong>Selected Item Type: </strong><span id="selectedItemType">&nbsp;</span><br/>
				<strong>Selected Item Path: </strong><span id="selectedItemPath">&nbsp;</span><br/>
				<a href="javascript:selectedItemCommand('play-item')">Play Item</a><br/>
				<a href="javascript:selectedItemCommand('add-end')">Add Item (To End)</a><br/>
				<br/>
				<a href="javascript:selectedItemCommand('play-pause')">Play/Pause</a><br/>
				<a href="javascript:selectedItemCommand('next')">Next</a><br/>
				<a href="javascript:selectedItemCommand('previous')">Previous</a><br/>
				<a href="javascript:selectedItemCommand('forward')">Fast Forward (or for video, a 30 second skip ahead)</a><br/>
				<a href="javascript:selectedItemCommand('rewind')">Rewind (or for video, a 7 second skip back)</a><br/>

			</td></tr>
	</table>
</div>

<script src="http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js" language="JavaScript" type="text/javascript"></script>

<script type="text/javascript" language="JavaScript">
	var MAX_ROWS=500;
	var LIBRARY_PANE = "library";
	var NOW_PLAYING_PANE = "nowPlaying";
	var gLeftPaneContents = LIBRARY_PANE;

	$('controlInfo').innerHTML = $('controlInfoBody').innerHTML;

	function showHome() {
		showItems("","");
	}
	function updateNowPlayingIfVisible() {
		if (gLeftPaneContents == NOW_PLAYING_PANE) {
			//update now playing
			showNowPlaying();
		}
	}

	function showZones() {
		var url = '/json/?command=get-zones' + "&cacheSkipper=" + new Date().getTime();
		$('jsoncall').innerHTML = url;
		new Ajax.Request(url, {
			method:'get',
			onSuccess: function(transport){
			    var jrZoneItems = transport.responseText.evalJSON();
				var result = "";
				for (var i = 0; i < jrZoneItems.length; i++) {
					var jrZoneItem = jrZoneItems[i];
					result += "<a href=\"javascript:selectZone('" + escape(jrZoneItem.zoneName.replace(/'/, "%27")) + "','" + jrZoneItem.zone + "')\">" + jrZoneItem.zoneName.escapeHTML() + "</a>&nbsp;";
				}
				$('zones').innerHTML = result;
			}
		});
	}

	function selectZone(zoneName, zoneId) {
		$('selectedZoneId').innerHTML = zoneId;
		$('selectedZoneName').innerHTML = zoneName;
		updateNowPlayingIfVisible();
	}

	function selectedItemCommand(command) {
		var querystring = "?command=" + command + "&" + $('selectedItemType').innerHTML + "=" + $('selectedItemPath').innerHTML + "&cacheSkipper=" + new Date().getTime();
		var zoneId = $('selectedZoneId').innerHTML;
		if (zoneId != undefined) {
			querystring += "&zone=" + zoneId;
		}
		var url = '/json/' + querystring;
		$('jsoncall').innerHTML = url;
		new Ajax.Request(url, {
			method:'get',
			onSuccess: function(transport){
				updateNowPlayingIfVisible();
			}
		});

	}

	function showNowPlaying() {
		gLeftPaneContents = NOW_PLAYING_PANE;

		var querystring = '?command=now-playing' + "&cacheSkipper=" + new Date().getTime();
		var zoneId = $('selectedZoneId').innerHTML;
		if (zoneId != undefined) {
			querystring += "&zone=" + zoneId;
		}
		var url = '/json/' + querystring;
		$('jsoncall').innerHTML = url;
		new Ajax.Request(url, {
			method:'get',
			onSuccess: function(transport){
			    var jrItems = transport.responseText.evalJSON();
				var result = "";
				for (var i = 0; i < jrItems.length; i++) {
					var jrItem = jrItems[i];
					var linkStyle = "";
					if (jrItem.isNowPlayingTrack) {
						linkStyle = "font-weight:bold";
					}
					result += "<a style='" + linkStyle + "' href=\"javascript:showFile(unescape('" + escape(escape(jrItem.file)) + "'));\">" + jrItem.text + "</a><br/>";
					if (i == MAX_ROWS) {
						result += "Max rows (" + MAX_ROWS +") returned until ajaxy kinks are worked out";
					 	break;
					}
				}
				$('library').innerHTML = result;
				$('trackInfo').innerHTML = "&nbsp;";
			}
		});
	}

	function showItems(item, location) {
		gLeftPaneContents = LIBRARY_PANE;

		var querystring = "";
		if (!location || location == "") {
			querystring = "";
			$('controlInfo').hide();
		} else {
			querystring = '?command=show&location=' + location + "&cacheSkipper=" + new Date().getTime();
			$('selectedItem').innerHTML = unescape(item);
			$('selectedItemType').innerHTML = 'location';
			$('selectedItemPath').innerHTML = location;
			$('controlInfo').show();
		}
		var url = '/json/' + querystring;
		$('jsoncall').innerHTML = url;
		new Ajax.Request(url, {
			method:'get',
			onSuccess: function(transport){
			    var jrItems = transport.responseText.evalJSON();
				var result = "";
				for (var i = 0; i < jrItems.length; i++) {
					var jrItem = jrItems[i];
					if (jrItem.isFolder) {
						result += "<a href=\"javascript:showItems(unescape('" + escape(escape(jrItem.text)) + "'),unescape('" + escape(escape(jrItem.location)) + "'))\">" + jrItem.text + "</a><br/>";
					} else {
						result += "<a href=\"javascript:showFile(unescape('" + escape(escape(jrItem.file)) + "'));\">" + jrItem.text + "</a><br/>";
					}
					if (i == MAX_ROWS) {
						result += "Max rows (" + MAX_ROWS +") returned until ajaxy kinks are worked out";
					 	break;
					}
					
				}
				$('library').innerHTML = result;
				$('trackInfo').innerHTML = "&nbsp;";
			}
		});
	}

	function showFile(file) {
		if (!file || file == "") {
			alert("Error. file must be set");
			return;
		}
		var querystring = '?command=info&file=' + file
		$('selectedItem').innerHTML = unescape(file);
		$('selectedItemType').innerHTML = 'file';
		$('selectedItemPath').innerHTML = file;
		$('controlInfo').show();

		var url = '/json/' + querystring;
		$('jsoncall').innerHTML = url;
		new Ajax.Request(url, {
			method:'get',
			onSuccess: function(transport){
			    var trackInfoItems = transport.responseText.evalJSON();
				var result = "<table>";
				for (i = 0; i < trackInfoItems.length; i++) {
					var trackInfoItem = trackInfoItems[i];
					result += "<tr><td>" + trackInfoItem.field + "</td><td>" + trackInfoItem.formattedValue + "</td></tr>";
				}
				result += "</table>";
				$('trackInfo').innerHTML = result;
			}
		});
	}


</script>
</html>
